
<!DOCTYPE html>
<html lang="en">
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登陆页面</title>
    <script>
        //         $(document).ready(function() {
        //   // 当输入框获得焦点时
        //   $('input').focus(function() {
        //     // 更改背景图片
        //     $(this).prev('.box1').css('background-image', 'url(.//photos/img01.jpg) no-repeat');
        //   });
        //   // 当输入框失去焦点时
        //   $('input').blur(function() {
        //     // 恢复背景图片
        //     $(this).prev('.box1').css('background-image', 'url(.//photos/jingdong-icons.png) no-repeat');
        // //   });
        // // });
        // $(function(){
        //     $("inout").click(function(){
        //         // $(".box1").hide();
        //         $("#b1").css('background-color','red')
        //
        //         // $(".box1").css("background","url(.//photos/jingdong-icons.png) no-repeat")
        //         // // $(".box1").css( "background-position-y", "-48px")
        //     })
        //     $(inout(type="password")).focus(function(){
        //         $(".box2").css("background","url(.//photos/jingdong-icons.png) no-repeat")
        //         $(".box2").css( "background-position-y", "-48px")
        //         $(".box2").css( "background-position-x", "-48px")
        //     })
        // })
    </script>
    <style>
        /* .box1 in{
           background: url(.//photos/jingdong-icons.png) no-repeat;

           background-position-y: 48px;
           display: none;
       }   */
        /* .box2{
            background: url(.//photos/jingdong-icons.png) no-repeat;
            background-position-y: 48px;
            background-position-x: -48px;
            display: none;
        }  */
        .login{
            height: 287px;
            width: 346px;
            border: 1px rgb(161, 159, 159) solid;
            background-color: #fff;
            /* margin: 220px auto; */
            /* position: relative; */
            /*height: 100%; */
        }
        .zhsz1,.zhsz2{
            width: 173px;
            height: 54px;
            background-color: #fff;

        }
        *{
            margin: 0;
            padding: 0;
        }
        .zhsz2,.zhsz1 {
            float: left;
            display:flex;
            justify-content:center;
            align-items:center;
        }
        .zhsz2{
            color: red;
            overflow: hidden;
        }
        div > a{
            text-decoration: none;
            color: inherit;
        }
        .name,.pw{
            width: 300px;
            height: 40px;
            /*border: 2px,#ccc,solid;*/
        }
        .name{
            position: absolute;
            top: 88px;
            left: 19px;
            /* background: url(.//photos/jingdong-icons.png) no-repeat; */
        }
        .pw{
            position: absolute;
            top: 147px;
            left: 19px;
            /*background: url();*/
        }
        .box1,.box2{
            width: 37px;
            height: 37px;
            background: url(./photos/jingdong-icons.png) no-repeat;
            /* background-position-x: ; */
            /* /background-position: -48px,0px;  */
            /* border: 1px,rgb(146, 24, 227),solid;             */
            border: 1px #ccc solid;
        }
        .box2{
            background-position-x: -48px;

        }
        .box2,.box1{
            float: left;

        }
        input[type="text"], input[type="password"]{
            width:258px ;
            height: 37px;
            border: 1px #ccc solid;
            overflow: hidden;
        }
        /* .login input{
            width: 260px;
            height: 40px;
            border: 1px #ccc solid;
        } */
        /* input[type="text"]{
            margin-top: 0px;
            margin-bottom: 0px;
            margin-left: 20px;
            margin-right: 20px;

        } */
        /* input[type="password"]{
            margin-top: 20px;
            margin-bottom: 20px;
            margin-left: 20px;
            margin-right: 20px;
        } */
        input[type="submit"]{
            background-color: red;
            color: #fff;
            /* margin-top: 30px;
            margin-bottom: 10px;
            margin-left: 20px;
            margin-right: 20px;             */
            width: 300px;
            height: 37px;
            position: absolute;
            top: 205px;
            left: 19px;
        }
        /* .name,.pw{
           width: 175px;
           height: 55px;

       } */

        /* .box1{
           width: 30px;
           height: 30px; */
        /* background: url(.//photos/jingdong-icons.png) no-repeat; */
        /* } */
        body{
            position: relative;

        }
        .login{
            position: absolute;
            top: 200px;
            left: 550px;
        }

    </style>
</head>
<body>
<div class="login">
    <form action="http://192.168.5.103:8080/Tomcat01/LoginServlet" method="post">
        <div class="dlxz" id="lol">
            <div class="zhsz1">
                <a href="">扫码登录</a>
            </div>
            <div class="zhsz2">
                <a href="">账户登录</a>
            </div>
            <div class="name">
                <div class="box1" id="b1">
                </div>
                <input type="text" name="username" placeholder="邮箱/账号名/登陆手机 " required >
            </div>
            <div class="pw">
                <div class="box2" id="b2"></div>
                <input type="password" name="password" placeholder="请输入密码" required>
            </div>
            <div class="dl">
                <input type="submit"  value="登录" >
            </div>
        </div>
    </form>
</div>

</body>
</html>